
<template>
    <transition name="my">
    <div class="orh-sidebar" :style="style" v-if="isShow" ref="panel">
        <div class="heads">
            <div class="le">
                <span class="tit">{{title}}</span>
                <Tooltip content="添加" placement="bottom" class="icon_handel" v-if="add">
                    <span @click="toAdd"><Icon type="plus" size="22"></Icon></span>
                </Tooltip>
                <Tooltip content="添加" placement="bottom" class="icon_handel" v-button="adds">
                    <span @click="toAdds"><Icon type="plus" size="22"></Icon></span>
                </Tooltip>
                <Tooltip content="删除" placement="bottom" class="icon_handel" v-if="del">
                    <span @click="toDel"><Icon type="trash-b" size="22"></Icon></span>
                </Tooltip>
                <Tooltip content="删除" placement="bottom" class="icon_handel" v-button="dels">
                    <span @click="toDel"><Icon type="trash-b" size="22"></Icon></span>
                </Tooltip>
            </div>

            <div class="ri">
                    <Button type="text" icon="ios-download" class="a" v-if="exports" @click="exportclick"></Button>
                    <Button type="text" icon="ios-printer" class="a" v-if="printer" @click="printerclick"></Button>
                <template v-if="scale">
                    <Button type="text" icon="android-expand" class="a" v-if="!isScale" @click="scaled"></Button>
                    <Button type="text" icon="android-contract" class="a" v-if="isScale" @click="scaled"></Button>
                </template>
                <Button type="text" icon="android-close" class="b" @click="panHide"></Button>
            </div>
        </div>
        <div class="form">
            <slot></slot>
        </div>
    </div>
    </transition>
</template>

<script>

    export default {
        data() {
            return {
                isScale: false,
                style: {
                    width: (this.cover)?'100%':(this.width+'px')
                }
            }
        },
        props: {
            'add': Boolean,
            'adds': [Boolean, String],
            'del': Boolean,
            'dels': String,
            'title': String,
            'value': Boolean,
            'width': Number,
            'scale': Boolean,
            'cover': Boolean,
            'printer': Boolean,
            'exports': Boolean
        },
        methods: {
            printerclick() {
                this.$emit('on-printer')
            },
            exportclick () {
                this.$emit('on-exports')
            },
            panHide() {
                this.isShow = false
            },
            scaled() {
                if(this.isScale) {
                    this.$refs.panel.style.width = (this.width)?(this.width+'px'):'50%'
                } else {
                    this.$refs.panel.style.width = '100%'
                }
                this.isScale = !this.isScale
            },
            toAdd() {
                this.$emit('on-add');
            },
            toAdds() {
                this.$emit('on-adds');
            },
            toDel() {
                this.$emit('on-del');
            }
        },
        computed: {
            isShow: {
                get() {
                    return this.value;
                },
                set(val) {
                    this.$emit('input', val);
                }
            }
        },
        watch: {
            isShow(val) {
                if(!val) this.isScale=false
            }
        },
        
    }
</script>

<style lang="less">
.orh-sidebar {
    position: absolute;
    top: 0; bottom: 0;
    right: 0;
    width: 50%;
    background: #fff;
    z-index: 100;
    transition: width .3s;
    border-left: 1px solid #f1f1f1;
    box-shadow: -2px 0 7px 1px #f1f1f1;
    .heads {
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        .le {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            padding-left: 15px;
            .tit {
                font-size: 15px;
                font-weight: bold;
            }
            .icon_handel {
                cursor: pointer;
                margin-left: 20px;
            }
        }
        .ri {
            .a {
                width: 30px;
                font-size: 18px;
                font-weight: bold;
            }
            .b {
                font-size: 23px;
                font-weight: bold;
                margin: 2px 7px 0 0;
            }
        }
    }
    .form {
        position: absolute;
        top: 45px; bottom: 0;
        right: 0; left:0;
        padding: 12px 17px;
        overflow-y: auto;
    }
}
/* 动画样式 */
.my-enter-active, .my-leave-active {
    transition: right .4s;
}
.my-enter, .my-leave-to {
    right: -1200px;
}
</style>
